<script setup>
import Consts from "@/const"
import * as api from "@/api/v-sys-service/sys-manage/user/index.js";
import { listOrgOptions } from "@/api/v-sys-service/sys-manage/org/index.js"
import { listRoleOptions } from "@/api/v-sys-service/sys-manage/role/index.js"

const emits = defineEmits([
  'query',
  'update:modelValue'
])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const orgList = ref([])
const roleList = ref([])
const formData = ref({
  id: '',
  username: '',//用户名
  avatar: '',//用户头像
  orgId: '',//组织ID
  email: '',//邮箱
  gender: '',//性别
  mobile: '',//手机号
  nickname: '',//昵称
  roleIds: '',//角色ID集合
  status: true,//用户状态 true 启用 FALSE 禁用
})

const saveBtnLoading = ref(false)
const formRef = ref()

const rules = ref({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  orgId: [{ required: true, message: "所属组织不能为空", trigger: "blur" }],
  roleIds: [
    { required: true, message: "用户角色不能为空", trigger: "blur" },
  ],
  email: [
    {
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
})
const visible = computed(
    {
      get(){
        return props.modelValue
      },
      set(val){
        emits('update:modelValue',val)
      }
    }
)

const title = computed(
    () => {
      return props.rowData && props.rowData.id ? '编辑用户' : '新增用户'
    }
)
watch(
    props.rowData,
    (val) =>{
      if (val && val.id) Object.assign(formData.value,val)
    },
    {
      immediate: true,
    }
)
onMounted(()=>{
  init()
})
const init = () => {
  init_Cache()
}

const treeProp = ref({
  disabled: (data, node) => data.value === Consts.ROOT_NODE_ID
})
const init_Cache = () => {
  const params = {
    pid: '',
    pName: ''
  }
  listOrgOptions(params).then(({data})=>{
    orgList.value = data
  })
  listRoleOptions().then(({data})=>{
    roleList.value = data
  })
}
const sure = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      saveBtnLoading.value = true
      const { code } = await api.save(formData.value)
      saveBtnLoading.value = false
      if (code === 200){
        visible.value = false
        ElMessage({
          message: '保存成功',
          type: 'success',
        })
        emits('query')
      }
    }
  })
}
</script>

<template>
  <v-dialog v-model="visible" :loading="saveBtnLoading" :title="title" @sure="sure">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input
                v-model="formData.username"
                :readonly="!!formData.id"
                placeholder="请输入用户名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属组织" prop="orgId">
            <el-tree-select
                v-model="formData.orgId"
                placeholder="请选择所属组织"
                :data="orgList" filterable
                check-strictly :props="treeProp"
                :render-after-expand="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <v-select-dict v-model="formData.gender" type-code="Gender" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色" prop="roleIds">
            <el-select
                v-model="formData.roleIds"
                multiple
                placeholder="请选择"
            >
              <el-option
                  v-for="item in roleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="mobile">
            <el-input
                v-model="formData.mobile"
                placeholder="请输入手机号码"
                maxlength="11"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input
                v-model="formData.email"
                placeholder="请输入邮箱"
                maxlength="50"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :value="true">正常</el-radio>
              <el-radio :value="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </v-dialog>
</template>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
</style>